// 首页
import Header from "./homeTop";
import Footer from "./footer";
import { head } from "../../api/home";
import "./index.scss";
import { useEffect, useState } from "react";
import { topCateHory } from '../../utils/const'
import { NavLink } from 'react-router-dom'
import { observer,inject } from "mobx-react";
  export default  inject('store')(observer(props=>{
      const { children,store } = props;
       /**
       * 头部tab
       */
        const [tablist, settablist] = useState(topCateHory.map((item, index) => ({
          id: index,
          name: item
        })));
      
        /**
         * 获取tab导航
         */
        const gettab = async () => {
          try {
            const data = await head();
            settablist(data);
            store.setNavList(data)
          } catch (error) { }
        };
      
        /**
         * 是否显示悬浮导航栏
         * **/
        const [isshow, setIsShow] = useState(false)
      
        /**
         * 设置显示
         * **/
        const show = (isshow) => {
          setIsShow(isshow)
        }
      
        useEffect(() => {
          gettab()
          document.documentElement.addEventListener('scroll',()=>{
              if(document.documentElement.scrollTop>=70){
                setIsShow(true)
              }else{
                setIsShow(false)
          }
              return ()=>{
                document.documentElement.removeEventListener('scroll',show)
              }
          })
        }, [])
      
        return (
          <div className="layout-home-wrap">
            <div className="top">
              <Header></Header>
            </div>
            <div className="max-warp">
              <div className={`layout-main fixed ${isshow && 'show'}`}>
                <div className="home-logo">
                  <div className="left">
                    <img src={require("@/assets/images/logo.png")} alt="" />
                  </div>
                  <div className="middle ">
                    <a href="/">首页</a>
                    {tablist.map(item => (
                      <NavLink className="child"  to={"/category?id=" + item.id} key={item.id}>{item.name}
                        {item.children &&
                          <div className="mask">
                            {item.children.map(child => (
                              <NavLink key={child.id} to={"/category/sub?id=" + child.id}>
                                <img src={child.picture} alt="" />
                                <p>{child.name}</p>
                              </NavLink>
                            ))}
                          </div>
                        }
                      </NavLink>)
                    )}
                  </div>
                  <div className="right">
                    <div className="search">
                      <input type="text" placeholder="搜一搜" />
                      <img
                        className="fangda"
                        src={require("@/assets/images/search.png")}
                      />
                    </div>
                    <div className="rights">
                      <img
                        className="shopcar"
                        src={require("@/assets/images/购物车 .png")}
                      />
                      <span>0</span>
                    </div>
                  </div>
                </div>
                <div></div>
              </div>
              <div className="content">
      
                {children}
      
              </div>
            </div>
      
            <div className="layout-footer">
              <div className="bx">
                <Footer></Footer>
              </div>
            </div>
          </div>
        );

  }))
